<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link href="../../assets/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="../../assets/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../../assets/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../assets/js/bootstrap-datepicker.min.js"></script>

    <script type="text/javascript" src="../../assets/locales/bootstrap-datepicker.zh-CN.js"></script>

    <script type="text/javascript">

        $(function () {

            //以下日历插件在FF中存在兼容问题，在IE浏览器中可以正常使用。
            /*
            $("#startTime").datetimepicker({
                minView: "month",
                language:  'zh-CN',
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayBtn: true,
                pickerPosition: "bottom-left"
            });

            $("#endTime").datetimepicker({
                minView: "month",
                language:  'zh-CN',
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayBtn: true,
                pickerPosition: "bottom-left"
            });
            */

            //定制字段
            $("#definedColumns > li").click(function (e) {
                //防止下拉菜单消失
                e.stopPropagation();
            });

        });

    </script>
</head>
<body style="overflow-x:hidden">


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form id="querySubmit" th:action="@{|/activity/activity_list|}" class="form-inline" role="form"
                  style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" name="name" th:value="${name}">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" name="ownerName" th:value="${ownerName}">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control" type="date" id="startTime" name="startDate"
                               th:value="${startDate}"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control" type="date" id="endTime" name="endDate" th:value="${endDate}"/>
                    </div>
                </div>
                <!-- 隐藏域，用于参数的提交，保留翻页请求数据  -->
                <input type="hidden" name="pageNum" id="pageNumInput" th:value="${page.getPageNum()}">
                <input type="hidden" name="pageSize" id="pageSizeInput" th:value="${page.getPageSize()}">
                <button type="submit" class="btn btn-default" style="float:none">查询</button>
            </form>
        </div>
        <form th:action="@{|/activity/activityDelete|}">
            <div class="btn-toolbar" role="toolbar"
                 style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
                <div class="btn-group" style="position: relative; top: 18%;">
                    <button type="button" class="btn btn-primary" data-toggle="modal"
                            onclick="window.location.href='/activity/addListActivity'"><span
                            class="glyphicon glyphicon-plus"></span> 创建
                    </button>
                    <button type="submit" id="deleteBtn" class="btn btn-danger"><span
                            class="glyphicon glyphicon-minus"></span>
                        删除
                    </button>
                </div>
            </div>
            <div style="position: relative;top: 10px;">
                <table class="table table-hover">
                    <thead>
                    <tr style="color: #B3B3B3;">
                        <td><input type="checkbox" id="checkAll"/></td>
                        <td>名称</td>
                        <td>所有者</td>
                        <td>开始日期</td>
                        <td>结束日期</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="active" th:each="actMap:${page.getDataList()}">
                        <!-- 这个写成 value【th:value="${actMap.get('id')】 是为了将显示的消息进行 id 标记，
                             给标签一个 value 属性，方便后期使用，并且不显示在页面当中-->
                        <td><input type="checkbox" name="activityIds" th:value="${actMap.get('id')}"
                                   class="activityIds"/></td>
                        <td><a style="text-decoration: none; cursor: pointer;"
                               onclick="window.location.href='activity_detail.html';"
                               th:text="${actMap.get('a_name')}">发传单</a></td>
                        <td th:text="${actMap.get('owner_name')}"></td>
                        <td th:text="${actMap.get('startDate')}"></td>
                        <td th:text="${actMap.get('endDate')}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div style="height: 50px; position: relative;top: 30px;">
                <div>
                    <button type="button" class="btn btn-default" style="cursor: default;">共<b>[[${page.total}]]</b>条记录
                    </button>
                </div>
                <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
                    <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span id="pageSizeSpan" th:text="${page.getPageSize()}"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="javascript:void(0)" class="setPageSize">5</a></li>
                            <li><a href="javascript:void(0)" class="setPageSize">10</a></li>
                            <li><a href="javascript:void(0)" class="setPageSize">15</a></li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
                </div>
                <div style="position: relative;top: -88px; left: 285px;">
                    <nav>
                        <ul class="pagination">
                            <!--  为当前连接添加点击事件，如果为 true 则允许浏览器的默认行为，如果为 false 则阻止浏览器的默认行为   -->
                            <li th:class="${page.getPageNum()==1?'disabled':''}">
                                <a href="javascript:void(0)" id="firstPage">
                                    首页
                                </a>
                            </li>

                            <li th:class="${page.getPageNum()==1?'disabled':''}">
                                <a href="javascript:void(0)" id="upPage">
                                    上一页
                                </a>
                            </li>

                            <li th:class="${page.getPageNum()==page.getPageCount()?'disabled':''}">
                                <a href="javascript:void(0)" id="downPage">
                                    下一页
                                </a>
                            </li>

                            <li th:class="${page.getPageNum()==page.getPageCount()?'disabled':''}">
                                <a href="javascript:void(0)" id="lastPage">
                                    末页
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(function () {
        // 动态修改每页显示的条数  pageSize
        $(".setPageSize").bind("click", function () {
            var new_pageSize = $(this).html()
            var current_pageSize = $("#pageSizeSpan").html()
            if (new_pageSize == current_pageSize) {
                return false;
            }
            $("#pageNumInput").val(1)
            $("#pageSizeInput").val(new_pageSize)
            $("#querySubmit").submit()
        })
        // 首页点击事件
        $("#firstPage").bind("click", function () {
            // 翻页控制
            if ([[${page.getPageNum()==1}]]) {
                return false
            }
            $("#pageNumInput").val(1)
            $("#querySubmit").submit()
        })
        // 上一页点击事件
        $("#upPage").bind("click", function () {
            // 翻页控制
            if ([[${page.getPageNum()==1}]]) {
                return false
            }
            $("#pageNumInput").val([[${page.getPageNum()-1}]])
            $("#querySubmit").submit()
        })
        // 下一页点击事件
        $("#downPage").bind("click", function () {
            // 翻页控制
            if ([[${page.getPageNum()==page.getPageCount()}]]) {
                return false
            }
            $("#pageNumInput").val([[${page.getPageNum()+1}]])
            $("#querySubmit").submit()
        })
        // 末页点击事件
        $("#lastPage").bind("click", function () {
            // 翻页控制
            if ([[${page.getPageNum()==page.getPageCount()}]]) {
                return false
            }
            $("#pageNumInput").val([[${page.getPageCount()}]])
            $("#querySubmit").submit()
        })
        // 全选和取消
        $("#checkAll").bind("click", function () {
            $(".activityIds").prop("checked", $(this).prop("checked"))
        })
        $(".activityIds").bind("click", function () {
            var status = $(this).prop("checked")
            if (!status) {
                $("#checkAll").prop("checked", false)
                return
            }
        })
        $(".activityIds").bind("click", function () {
            if ($(".activityIds").length == $(".activityIds:checked").length) {
                $("#checkAll").prop("checked", true)
            }
        })
        $("#deleteBtn").bind("click", function () {
            if ($(".activityIds:checked").length == 0) {
                alert("请选择要删除的内容！~")
                return false;
            }
            return confirm("确定删除吗？")
        })


    })
</script>
</body>
</html>